<template>
    <div class="px-8">
        <com-filterTable
            :ref="pageConfig.key"
            class=""
            :services="pageConfig.serviceHandle"
            :filter-form-config="pageConfig.formConfig"
            :filterInline="false"
            :params="{}"
            :filterCol="4"
            filterLabelWidth="90px"
            :table-border="true"
            :showFormFilter="true"
            :showRequestNum="false"
            :top-operation="pageConfig.topOperation"
            :table-column="pageConfig.columnConfig"
            :queryDataHandle="queryDataHandle"
            :dataFormatHandle="dataFormatHandle"
            :autoLoad="true"
        />
        <com-formDialog
            ref="dialog"
            v-bind="dialogData"
            @changeOut="changeOut"
            @cancel="dialogCancelHandle"
            @submit="submitHandle"
        />
    </div>
</template>

<script>
import { selectDiagnosisDictList, createDiagnosisDict, updateDiagnosisDict, deleteDiagnosisDict } from "@/service/api.js";
import { DIAGNOSIS_CATEGORY_OPTIONS, STATUS_OPTIONS, formatStatus } from "@/utils/enum.js";
import _ from "lodash";
import moment from "moment";

export default {
    name: "diagnosisDict",
    data() {
        return {
            activeName: "filterTable",
            oldFormData: null,
            comDialogData: {},
            batchSelected: [],
            pageConfig: {
                key: "filterTable",
                serviceHandle: (data) => {
                    return selectDiagnosisDictList(data);
                },
                params: {},
                formConfig: [
                    { key: "code", label: "诊断编码" },
                    { key: "name", label: "诊断名称" },
                ],
                columnConfig: [
                    { type: "select" },
                    { value: "code", label: "诊断编码" },
                    { value: "name", label: "诊断名称" },
                    { value: "icdCode", label: "ICD编码" },
                    { value: "category", label: "分类" },
                    {
                        value: "status",
                        label: "状态",
                        formatter: (row) => {
                            return formatStatus(row.status);
                        },
                    },
                    {
                        value: "createTime",
                        label: "创建时间",
                        width: 180,
                        formatter: (row) => {
                            return moment(row.createTime).format(
                                "YYYY-MM-DD HH:mm:ss"
                            );
                        },
                    },
                    {
                        value: "action",
                        type: "render",
                        width: 200,
                        label: "操作",
                        render: (h, { data: { row } }) => {
                            const editBtn = (
                                <el-button type="text" on-click={() => this.addOrEditHandle(row)}>修改</el-button>
                            );
                            const delBtn = (
                                <el-button type="text" on-click={() => this.deleteList([row])}>删除</el-button>
                            );
                            const detailBtn = (
                                <el-button type="text" on-click={() => this.viewDetail(row)}>查看</el-button>
                            );

                            return [editBtn, delBtn, detailBtn];
                        },
                    },
                ],
                topOperation: {
                    left: [
                        {
                            name: "新增",
                            key: "add",
                            type: "primary",
                            requireArguments: ["batchSelected", "filterForm"],
                            handle: (batchSelected) => {
                                this.addOrEditHandle();
                            },
                        },
                        {
                            name: "删除",
                            key: "delete",
                            requireArguments: ["batchSelected", "filterForm"],
                            handle: (batchSelected) => {
                                if(!batchSelected||!batchSelected.length) {
                                    this.$message.error('请选择要删除的数据！')
                                    return;
                                }
                                this.deleteList(batchSelected)
                            },
                        }
                    ],
                },
            },
        };
    },
    watch: {},
    computed: {
        dialogData() {
            let { comDialogData } = this;
            return {
                configs:
                    this[comDialogData.configName] || comDialogData.configs,
                ...comDialogData,
            };
        },
        formDialogConfig() {
            return [];
        },
    },
    mounted() {},
    methods: {
        changeOut({ key, formData } = {}) {
            this.oldFormData = { ...formData };
        },
        dataFormatHandle(data) {
            return {
                list: data.rows || [],
                total: data.total || 0,
            };
        },
        queryDataHandle(params) {
            let temp = {
                ...params,
            };
            return temp;
        },
        loadList() {
            let ref = this.$refs[this.activeName];
            if (Array.isArray(ref)) {
                ref = ref[0];
            }

            ref.filterFormQueryHandle();
        },
        dialogCancelHandle() {
            this.$refs.dialog.close();
        },
        async submitHandle(data) {
            let handle = this.dialogData.submitHandle;
            handle = typeof handle !== "function" ? this[handle] : handle;
            if (handle) {
                let loading = await this.$store.dispatch("global/loading");
                handle(data)
                    .then((res) => {
                        loading.close();
                        this.$refs.dialog.close();
                        this.loadList();
                    })
                    .catch((e) => {
                        console.log(e);
                        loading.close();
                    });
            }
        },
        // 新增或编辑
        addOrEditHandle(row) {
            this.comDialogData = {
                submitHandle: (data) => {
                    let handle = createDiagnosisDict;
                    let params = {
                        ...data,
                    }
                    if(row) {
                        handle = updateDiagnosisDict;
                        params.id = row.id;
                    }
                    return handle(params)
                },
                initFormData: row,
                configs: [
                    { key: "code", label: "诊断编码", required: true },
                    { key: "name", label: "诊断名称", required: true },
                    { key: "icdCode", label: "ICD编码", required: true },
                    // { key: "category", label: "分类", required: true, type: "select", options: DIAGNOSIS_CATEGORY_OPTIONS },
                    { key: "status", label: "状态", required: true, type: "select", options: STATUS_OPTIONS },
                ],
                activeRow: row,
                title: row ? "修改" : "新增",
                width: "550px",
                height: "350px",
                labelPosition: "left",
                labelWidth: "110px",
                col: 1,
            };
            this.$refs.dialog.show();
        },
        // 查看详情
        viewDetail(row) {
            this.comDialogData = {
                initFormData: row,
                configs: [
                    { key: "code", label: "诊断编码", disabled: true },
                    { key: "name", label: "诊断名称", disabled: true },
                    { key: "icdCode", label: "ICD编码", disabled: true },
                    // { key: "category", label: "分类", disabled: true, type: "select", options: DIAGNOSIS_CATEGORY_OPTIONS },
                    { key: "status", label: "状态", disabled: true, type: "select", options: STATUS_OPTIONS },
                    { key: "createTime", label: "创建时间", disabled: true, formatter: (val) => moment(val).format("YYYY-MM-DD HH:mm:ss") },
                ],
                activeRow: row,
                title: "查看",
                width: "550px",
                height: "350px",
                labelPosition: "left",
                labelWidth: "110px",
                col: 1,
                slotRenders: {
                    footer: (h) => {
                        return (
                            <div style="text-align: right;">
                                <el-button on-click={() => this.dialogCancelHandle()}>关闭</el-button>
                            </div>
                        );
                    },
                },
            };
            this.$refs.dialog.show();
        },
        // list删除
        deleteList(list) {
            let params = {
                id: list.map(item => item.id).join(',')
            }
            this.$confirm("确定要删除吗？").then(() => {
                this.comDialogData = {
                    submitHandle: () => {
                        return deleteDiagnosisDict(params)
                    }
                }
                this.submitHandle();
            });
        },
    },
};
</script>
